<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in list" :key="item.title">
        <router-link to="/home/newsinfo">
          <img class="mui-media-object mui-pull-left" src="https://portrait.gitee.com/uploads/avatars/user/2618/7854009_veneno66666_1595640370.png!avatar30" />
          <div class="mui-media-body">
            <h1>{{item.title}}</h1>
            <p class='mui-ellipsis'>
              <span>发表时间: {{item.date_time | dateFormat}}</span>
              <span>点击: {{item.counts}}次</span>
            </p>
          </div>
        </router-link>
      </li>

    </ul>
  </div>
</template>

<script>
export default {
  name: 'newsList',
  data () {
    return {
      list: [
        { title: '斗罗', date_time: Date.now(), counts: 1 },
        { title: '星环', date_time: Date.now(), counts: 2 },
        { title: '萌新', date_time: Date.now(), counts: 6 },
        { title: '弧形', date_time: Date.now(), counts: 9 },
        { title: '飞天', date_time: Date.now(), counts: 12 },
        { title: '不良人', date_time: Date.now(), counts: 95 }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  .mui-table-view{
    li{
      h1{
        font-size: 14px;
      }
      .mui-ellipsis{
        font-size: 12px;
        color: #007aff;
        display: flex;
        justify-content: space-between;
      }
    }

  }

</style>
